const path = require('path')
const VConsolePlugin = require('vconsole-webpack-plugin')
const LodashWebpackPlugin = require('lodash-webpack-plugin')
const webpack = require('webpack')
const version = require('./package.json').version

const { VUE_APP_TITLE, DEVSERVERPORT, NODE_ENV, VCONSOLE, VUE_APP_SENTRY_ENABLED, VUE_APP_SENTRY_PLUGIN_ENABLED } = process.env

const resolve = dir => path.join(__dirname, dir)
const DEV = NODE_ENV === 'development'
const PROD = NODE_ENV === 'production'

const target = 'http://192.168.50.30'
const loginIp = 'http://192.168.3.84'

module.exports = {
  publicPath: !DEV ? './' : '/',
  outputDir: 'thd-xg-board-h5',
  assetsDir: 'static',
  lintOnSave: DEV,
  productionSourceMap: PROD && VUE_APP_SENTRY_ENABLED === 'yes' && VUE_APP_SENTRY_PLUGIN_ENABLED === 'yes',
  devServer: {
    port: Number(DEVSERVERPORT),
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      '/skl': {
        target: target + '/skl',
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/skl': ''
        }
      },
      '/backstage': {
        target: loginIp,
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          '^/backstage': '/backstage'
        }
      }
    }
  },
  configureWebpack: {
    name: VUE_APP_TITLE,
    resolve: {
      alias: {
        '@': resolve('src'),
        components: resolve('src/components'),
        images: resolve('src/assets/images')
      }
    }
  },
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [resolve('src/styles/_variables.scss'), resolve('src/styles/_mixins.scss'), resolve('src/styles/_function.scss')]
    }
  },
  chainWebpack(config) {
    config.set('name', VUE_APP_TITLE)
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')

    config
      .plugin('__VERSION__')
      .use(
        new webpack.DefinePlugin({
          __VERSION__: JSON.stringify(version)
        })
      )
      .end()

    if (!DEV) {
      config
        .plugin('loadshReplace')
        .use(new LodashWebpackPlugin())
        .end()
    }
    config
      .plugin('VConsolePlugin')
      .use(
        new VConsolePlugin({
          filter: [],
          enable: DEV && VCONSOLE === 'yes'
        })
      )
      .end()

    config
      .plugin('ProvidePlugin')
      .use(
        new webpack.ProvidePlugin({
          _: 'lodash'
        })
      )
      .end()

    // set preserveWhitespace
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions.preserveWhitespace = true
        return options
      })
      .end()

    config.when(DEV, config => config.devtool('cheap-source-map'))

    config.when(!DEV, config => {
      // config
      //   .plugin('ScriptExtHtmlWebpackPlugin')
      //   .after('html')
      //   .use('script-ext-html-webpack-plugin', [{
      //     inline: /runtime\..*\.js$/
      //   }])
      //   .end()
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          libs: {
            name: 'chunk-libs',
            test: /[\\/]node_modules[\\/]/,
            priority: 10,
            chunks: 'initial'
          },
          vantUI: {
            name: 'chunk-vantUI',
            priority: 20,
            test: /[\\/]node_modules[\\/]_?vant(.*)/
          },
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'),
            minChunks: 3,
            priority: 5,
            reuseExistingChunk: true
          }
        }
      })
      config.optimization.runtimeChunk('single')
    })
  },
  css: {
    loaderOptions: {
      less: {
        // 若使用 less-loader@5，请移除 lessOptions 这一级，直接配置选项。
        lessOptions: {
          modifyVars: {
            // 直接覆盖变量
            hack: `true; @import "./src/styles/_var.less";`
          }
        }
      }
    }
  }
}
